<template>
    <el-container>

        <el-dialog title="提示" :visible.sync="banner.isShow" width="30%" center>
            <el-form label-position="left" :model="bannerInfo" label-width="40px">
                <el-form-item label="名称">
                    <el-input v-model="bannerInfo.title" autocomplete="off"></el-input>
                </el-form-item>



                <el-form-item label="图片">
                    <el-upload action="https://www.mocky.io/v2/5185415ba171ea3a00704eed/posts/" :auto-upload="false"
                        list-type="picture-card" :on-exceed="handleExceed" :on-preview="handlePictureCardPreview"
                        :on-remove="handleRemove" :on-change="handleCommit" :limit="1">
                        <i class="el-icon-plus"></i>
                    </el-upload>
                    <el-dialog :visible.sync="dialogVisible">
                        <img width="100%" :src="bannerInfo.img" alt="">
                    </el-dialog>
                </el-form-item>
                <el-form-item label="启用">
                    <el-switch v-model="bannerInfo.status" active-color="#13ce66" inactive-color="#ff4949">
                    </el-switch>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="handleCancel">取 消</el-button>
                <el-button type="primary" @click="handleSuccess">确 定</el-button>
            </span>
        </el-dialog>

    </el-container>
</template>

<script>
    export default {
        props: ['banner', 'bannerInfo'],
        data() {
            return {



                dialogVisible: false,
                imgList: []

            }
        },
        watch: {
            banner: {
                handler() { // 处理函数
                    if (this.bannerInfo.id === "" || this.bannerInfo.id === null) {
                        this.imgList = []
                    } else {
                        this.imgList = []
                        this.imgList.push({
                            url: "http://localhost:3000" + this.bannerInfo.img
                        })
                    }

                }
            },
            deep:true
        },
            computed: {

            },
            methods: {
                handleRemove(file, fileList) {
                    console.log(file, fileList);
                },
                handlePictureCardPreview(file) {
                    this.bannerInfo.url = file.url;
                    this.dialogVisible = true;
                },
                handleExceed() {
                    this.$message.warning("只允许一个图片")
                },
                handleSuccess() {

                    // if(this.bannerInfo.status==false){
                    //     this.bannerInfo.status=0
                    // }else{
                    //     this.bannerInfo.status=1
                    // }


                    let formData = new FormData()
                    for (let name in this.bannerInfo) {
                        formData.append(name, this.bannerInfo[name])
                    }
                    this.$emit("myevent", formData)
                    console.log(this.bannerInfo)
                    this.handleCancel()

                },
                handleCancel() {

                    /*   this.bannerInfo = {                //用这种方法会报 覆盖原来的错误
                          
                          title: "",
                          img: "",
                          status: 1
                      } */



                    this.bannerInfo.id = ""
                    this.bannerInfo.title = ""
                    this.bannerInfo.img = ""
                    this.bannerInfo.status = ""
                    this.banner.isShow = false
                    this.imgList = []
                },
                handleCommit(file, fileList) {
                    this.bannerInfo.img = file.raw
                }

            }
        }
    
</script>
<style scoped>
    .el-button {

        width: 160px;
        height: 50px;
        margin-bottom: 10px;
    }



    .dialog-footer>.el-button {
        width: 80px;
        margin-bottom: 0px;
        height: 40px;
    }
</style>